{extend name="./app/admin/view/main.html" /}

{block name="title"}
{assign name="itemName" value="$mipInfo['articleModelName']" /}
{assign name="itemUrl" value="article" /}
{assign name="itemApiUrl" value="Article" /}
自定义字段 - {$mipInfo['articleModelName']} - {__block__}
{/block}

{block name="style"}
{__block__}
<style type="text/css">
    
</style>
{/block}
{block name="main"}
 <header class="mipcms-container-header">
    <div class="float-left header-group">
        <h4 class="title">{$mipInfo['articleModelName']}</h4> <h5 class="sub-title">自定义字段</h5>
    </div>
    <div class="float-right">
        <button type="button" class="float-right ivu-btn ivu-btn-primary ivu-btn-circle" @click='addItemStatus'>
            <span><Icon type="plus-round"></Icon> 添加字段</span>
        </button>
    </div>
</header>
<main class="mipcms-container-body" style="height: calc(100% - 50px)">
    <section class="mip-box">
        <section class="mip-box-body">
            
            <section class="diy-table-list" v-cloak>
                <div class="diy-table-item diy-table-item-header">
                    <div class="list-unstyled row">
                        <div class="col-md-2">字段名称</div>
                        <div class="col-md-2">字段别名</div>
                        <div class="col-md-2">字段类型</div>
                        <div class="col-md-2">调用代码</div>
                        <div class="col-md-2"></div>
                        <div class="col-md-2">操作</div>
                    </div>
                </div>
                <div v-if='fieldList.length' class="diy-table-body">
                    <div class="diy-table-item" v-for='(item,index) in fieldList' >
                        <div class="list-unstyled row">
                            <div class="col-md-2 text-999"><span>{{item.name}}</span></div>
                            <div class="col-md-2 text-999"><span>{{item.value}}</span></div>
                            <div class="col-md-2 text-999"><span>{{item.type}}</span></div>
                            <div class="col-md-2">
                                <span>{{'{'}}{{'$itemInfo'}}['{{item.value}}']{{'}'}}</span>
                            </div>
                            <div class="col-md-2"></div>
                            <div class="col-md-2">
                                <button type="button" class="ivu-btn ivu-btn-error ivu-btn-small" @click='delItem(index, item)'>删除</button>
                                <button type="button" class="ivu-btn ivu-btn-primary ivu-btn-small" @click='dialogItemEdit(index, item)'>修改</i-button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="no-block" v-else style="height: calc(100% - 50px)">
                    <Icon type="ios-filing-outline"></Icon>
                    <p>暂无数据</p>
                </div>
            </section>
               
        </section>
    </section>
</main>
<Modal :title="field.fieldDialogTitle" v-model="fieldDialog" size="small" v-cloak>
    <i-form :model="field" :rules="field.rules" ref="field" :label-width="80">
        <Form-Item label="字段名称" prop="fieldTitle">
            <i-input v-model="field.fieldTitle" placeholder="例:下载地址"></i-input>
        </Form-Item>
        <Form-Item label="字段别名" prop="fieldName">
            <i-input v-model="field.fieldName" placeholder="例:down_url" :disabled='currentStatus == "edit"'><template slot="prepend">diy_</template></i-input>
        </Form-Item>
        <Form-Item label="新字段名称" prop="fieldName" v-if='currentStatus == "edit"'>
            <i-input v-model="field.fieldNewName" placeholder="请输入修改后的字段名称"><template slot="prepend">diy_</template></i-input>
        </Form-Item>
        <Form-Item label="字段类型">
            <i-select v-model="field.fieldType" placeholder="请选择" :disabled='currentStatus == "edit"'>
              <i-option v-for="item in field.fieldTypeList"
              :label="item.value"
              :value="item.key"></i-option>
            </i-select>
        </Form-Item>
    </i-form>
    <div slot="footer" class="dialog-footer" v-cloak>
        <i-button @click="fieldDialog = false">取 消</i-button>
        <i-button  v-if='currentStatus == "add"' type="primary" @click="addItem('field')">确 定</i-button>
        <i-button  v-if='currentStatus == "edit"' type="primary" @click="editItem('field')">确 定</i-button>
    </div>
</Modal>
{/block}

{block name="javascript"}
{__block__}
<script type="text/javascript">
new Vue({
    el: '#app',
    data:{
       fieldList: [],
       fieldDialog: false,
       currentStatus: '',
        field:{
            fieldDialogTitle: '添加字段',
            fieldTitle: '',
            fieldName: '',
            fieldNewName: '',
            fieldType: "string",
            fieldTypeList: [{key:'string',value:'文本字符串'},{key:'longtext',value:'超长文本'},{key:'int',value:'整型'}]
       }
    },
    mounted: function() {
        this.getFieldList();
    },
    methods: {
        getFieldList: function() {
            var _this = this;
            this.$mip.ajax('{$domain}/{$itemUrl}/ApiAdmin{$itemApiUrl}Diy/itemFieldList', {
            }).then(function (res) {
                if (res.code == 1) {
                      _this.fieldList = res.data;
                }
            });
        },
        delItem: function(index,item) {
            this.$Modal.confirm({
                title: '消息提示',
                content: '<p>确定删除么？删除后不可恢复</p>',
                onOk: () => {
                    _this = this;
                    this.$mip.ajax('{$domain}/{$itemUrl}/ApiAdmin{$itemApiUrl}Diy/delItem', {
                        fieldName: item.value,
                    }).then(function (res) {
                            if (res.code == 1) {
                            _this.$Message.success('删除成功');
                            _this.getFieldList();
                        }
                    });
                },
                onCancel: () => {
                }
            });
        },
        addItemStatus: function() {
            this.currentStatus = 'add';
            this.fieldDialog = true;
            this.field.fieldTitle = '';
            this.field.fieldName = '';
            this.field.fieldType = "string";
            this.field.fieldDialogTitle = '添加字段';
        },
        dialogItemEdit: function(index,item) {
            this.currentStatus = 'edit';
            this.fieldDialog = true;
            this.field.fieldDialogTitle = '修改字段';
            this.field.fieldTitle = item.name;
            this.field.fieldName = item.value.substr(4);
            this.field.fieldNewName = '';
            if (new RegExp("string").test(item.type)) {
                this.field.fieldType = "string";
            }
            if (new RegExp("longtext").test(item.type)) {
                this.field.fieldType = "longtext";
            }
            if (new RegExp("int").test(item.type)) {
                this.field.fieldType = "int";
            }
        },
        
        addItem: function() {
            this.field.fieldName = this.field.fieldName.trim();
            if (!this.field.fieldName) {
                Vue.prototype.$message({
                    type: 'error',
                    message: '请输入字段别名'
                });
            }
            var RegExp = /^[a-zA-Z_]+$/g;
            if (!RegExp.test(this.field.fieldName)) {
                Vue.prototype.$message({
                    type: 'error',
                    message: '字段别名必须为字母'
                });
                return false;
            }
            var _this = this;
            this.$mip.ajax('{$domain}/{$itemUrl}/ApiAdmin{$itemApiUrl}Diy/addField', {
                fieldTitle: this.field.fieldTitle,
                fieldName: this.field.fieldName,
                fieldType: this.field.fieldType,
            }).then(function (res) {
                if (res.code == 1) {
                    _this.$Message.success(res.msg);
                    _this.getFieldList();
                    _this.fieldDialog = false;
                }
            });
        },
        
        editItem: function() {
            this.field.fieldName = this.field.fieldName.trim();
            this.field.fieldNewName = this.field.fieldNewName.trim();
            if (this.field.fieldNewName) {
                var RegExp = /^[a-zA-Z_]+$/g;
                if (!RegExp.test(this.field.fieldNewName)) {
                        this.$Message.error('新字段名称必须为字母');
                    return false;
                }
            }
            var _this = this;
            this.$mip.ajax('{$domain}/{$itemUrl}/ApiAdmin{$itemApiUrl}Diy/editField', {
                fieldTitle: this.field.fieldTitle,
                fieldName:  this.field.fieldName,
                fieldNewName: this.field.fieldNewName,
                fieldType: this.field.fieldType,
            }).then(function (res) {
                if (res.code == 1) {
                    _this.$Message.success(res.msg);
                    _this.getFieldList();
                    _this.fieldDialog = false;
                }
            });
        },
     },
});
   </script>
{/block}
